[Sketch3] カラーパレットを簡単に保存、読み込みできるプラグイン Sketch Palettes

#デザイン

#Sketch

よこやまゆうだい

2016.05.18

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、デザイナーのよこやまです。

最近アプリデザイン界隈で人気のある Sketch ですが、みなさんカラーパレット活用していますか？
当然のことながら、よく使う色を定義しておくと便利ですよね。

ただ、アプリの規模が大きくなってきて Sketch ファイルを分割するときや、複数人で作業したりするときに Sketch 自体にはカラーパレットを保存、読み込みする機能がないので少し不便だなあと感じていました。
色の定義がFixしているような場合には独自のテンプレートを作っておけばよいですが、動的に色定義が変わっていくようなフェーズには少しマッチしません。

そこで今回はカラーパレットを簡単に保存、読み込みできる Sketch3 のプラグインSketch Palettesをご紹介します。

インストール方法

何はともあれ、プラグインをインストールしましょう。
プラグインをインストールするには直接 Sketch の Plugins フォルダにプラグインファイルを入れてもよいのですが、Sketch Toolbox を使うとより簡単にプラグインの管理ができるのでオススメです。

Sketch Toolbox を起動し、「Sketch Palettes」を検索します。すると次のように結果が表示されると思いますので「Install」ボタンをクリックします。

スクリーンショット 2016-05-17 18.54.57

インストール済みのプラグインを表示すると「Sketch Palettes」がインストールされていることがわかります。（プラグインをアンインストールする際はここで対象のプラグインの「Uninstall」をクリックします。）

スクリーンショット_2016-05-17_18_55_10-5

これで「Sketch Palettes」のインストールは完了です。

使い方

カラーパレットの保存

まず、次の画像のようにクラスメソッドのロゴに使用されている色を「Document Colors」に追加したとします。

スクリーンショット 2016-05-17 19.27.01

そして、このカラーパレットを保存するにはメニューの Plugins > Sketch Palettes > Document Colors > Save Palette... を選択します。

スクリーンショット_2016-05-17_18_53_07-9

するとファイルの保存場所を聞かれるのでファイルに名前をつけて保存します。このときファイルの拡張子は「◯◯◯.sketchpalette」となります。

スクリーンショット 2016-05-17 19.37.31

おもむろにこのファイルをテキストエディタ等で開いてみると、色の定義がHEXの配列で保存されていることがわかります。

{
    "colors": [
        "#7EC058", 
        "#70C7D9", 
        "#425AA7", 
        "#B86EAA", 
        "#EA545D", 
        "#F8E962"
    ], 
    "compatibleVersion": "1.0", 
    "pluginVersion": "1.1"
}